<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            font-size: 0;
        }

        #box1 {
            width: 243px;
            height:243px;
            float: left;
            position: relative;
        }

        #box2 {
            width: 400px;
            height: 400px;
            overflow: hidden;
            /* float: left; */
            position: absolute;
            left: 300px;
            top: 0px;
            border: 1px solid black;
        }
        #box1>img{
            width:100%;
            height: 100%;
        }
        #box2>img{
            width:130%;
            height: 130%;
        }
        #small {
            width: 180px;
            height: 180px;
            background: pink;
            opacity: 0.4;
            position: absolute;
            top: 0;
            left: 0;
        }

        #photo {
            position: absolute;
            top: 0;
            left: 0;
        }

        .active {
            display: block;
        }

        .close {
            display: none;
        }
    </style>
</head>

<body>
    <div id="box1">
        <img src="./images/4.webp" alt="pho" id="jpg">
        <div id="small" class="close"></div>
    </div>
    <div id="box2" class="close">
        <img src="./images/4.webp" alt="pho" id="photo">
    </div>
    <script>
        var box1 = document.getElementById('box1'), //获取节点部分
            box2 = document.getElementById('box2'),
            small = document.getElementById('small'),
            photo = document.getElementById('photo');
        var oLeft = 0,
            oTop = 0,
            x = 0,
            y = 0,
            m = 0,
            n = 0;
        box1.onmouseenter = function () { //设置移入显示事件
            box2.className = 'active';
            small.className = 'active';
        }
        box1.onmouseleave = function () { //设置移除隐藏事件
            box2.className = 'close';
            small.className = 'close';
        }
        small.onmouseover = function (e) {
            //设置鼠标按下事件
            x = e.clientX - this.offsetLeft;
            y = e.clientY - this.offsetTop;
            document.onmousemove = function (e) {
                //设置鼠标移动事件
                oLeft = e.clientX - x;
                oTop = e.clientY - y;
                if (oLeft <= 0) { //设置small的移动范围为盒子1
                    oLeft = 0;
                }
                if (oLeft >= box1.offsetWidth - small.offsetWidth) {
                    oLeft = box1.offsetWidth - small.offsetWidth;
                }
                if (oTop <= 0) {
                    oTop = 0;
                }
                if (oTop >= box1.offsetHeight - small.offsetHeight) {
                    oTop = box1.offsetHeight - small.offsetHeight;
                }
                m = -(parseInt(((photo.offsetWidth + x) / box2.offsetWidth) * oLeft));
                //核心代码等比例移动
                n = -(parseInt(((photo.offsetHeight + y) / box2.offsetHeight) * oTop));
                small.style.left = oLeft + 'px';
                photo.style.left = m + 'px';
                small.style.top = oTop + 'px';
                photo.style.top = n + 'px';
            }.bind(this)
            document.onmouseup = function (e) { //设置鼠标移除事件
                document.onmousemove = 'null';
                document.onmouseup = 'null';
            }
        }
    </script>
</body>

</html>